<div class="ama-dashboard">

    <ng-container *ngIf="!(loading$ | async); else loadingTemplate">
        <ng-container *ngIf="dataSource$ | async; let dataSource">
            <ng-container *ngIf="dataSource.data.length; else noDataTemplate">
                <div class="ama-dashboard-list">
                    <div class="ama-dashboard-list-container">
                        <table mat-table [dataSource]="dataSource" matSort modelingsdk-mat-table-responsive
                            [matSortActive]="sorting.key" [matSortDirection]="$any(sorting.direction)"
                            [matSortDisableClear]="true" (matSortChange)="onSortChange($event)">

                            <ng-container matColumnDef="name">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'DASHBOARD.TABLE.COLUMN_NAME' |
                                    translate }}</th>
                                <td mat-cell *matCellDef="let element" [attr.data-column-name]="'DASHBOARD.TABLE.COLUMN_NAME' | translate"
                                    (click)="rowSelected(element)"
                                    [attr.data-automation-id]="'project-' + element.id"
                                    [attr.data-project-id]="element.id"
                                    [attr.data-project-name]="element.name">
                                    <span> {{element.name}} </span>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="lastModifiedDate">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{
                                    'DASHBOARD.TABLE.COLUMN_MODIFIED' | translate }}</th>
                                <td mat-cell *matCellDef="let element" [attr.data-column-name]="'DASHBOARD.TABLE.COLUMN_MODIFIED' | translate"
                                    (click)="rowSelected(element)">{{
                                    element.lastModifiedDate | amTimeAgo }}</td>
                            </ng-container>

                            <ng-container matColumnDef="creationDate">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{
                                    'DASHBOARD.TABLE.COLUMN_CREATED' | translate }}</th>
                                <td mat-cell *matCellDef="let element" [attr.data-column-name]="'DASHBOARD.TABLE.COLUMN_CREATED' | translate"
                                    (click)="rowSelected(element)"> {{
                                    element.creationDate | amTimeAgo }} </td>
                            </ng-container>

                            <ng-container matColumnDef="createdBy">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{
                                    'DASHBOARD.TABLE.COLUMN_CREATED_BY' | translate }}</th>
                                <td mat-cell *matCellDef="let element" [attr.data-column-name]="'DASHBOARD.TABLE.COLUMN_CREATED_BY' | translate"
                                    (click)="rowSelected(element)"> {{
                                    element.createdBy }} </td>
                            </ng-container>

                            <ng-container matColumnDef="version">
                                <th mat-header-cell *matHeaderCellDef>{{ 'DASHBOARD.TABLE.COLUMN_VERSION' | translate }}
                                </th>
                                <td mat-cell *matCellDef="let element" [attr.data-column-name]="'DASHBOARD.TABLE.COLUMN_VERSION' | translate"
                                    [attr.data-automation-id]="'project-version-' + element.id"
                                    (click)="rowSelected(element)"> {{ element.version }} </td>
                            </ng-container>

                            <ng-container matColumnDef="collaborators">
                                <th mat-header-cell *matHeaderCellDef>{{ 'DASHBOARD.TABLE.COLUMN_COLLABORATORS' | translate }}</th>
                                <td mat-cell *matCellDef="let element"
                                    [attr.data-automation-id]="'project-list-collaborators-' + element.id"
                                    class="ama-dashboard-list-container-collaborators-cell">
                                    <modelingsdk-project-collaborators [projectId]="element.id">
                                    </modelingsdk-project-collaborators>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="menu">
                                <th mat-header-cell *matHeaderCellDef>{{ 'DASHBOARD.TABLE.COLUMN_OPTIONS' | translate }}
                                </th>
                                <td mat-cell *matCellDef="let element"
                                    [attr.data-column-name]="'DASHBOARD.TABLE.COLUMN_OPTIONS' | translate"
                                    class="ama-dashboard-list-container-custom-cell">
                                    <ng-container [ngTemplateOutlet]="!isMobileScreen() ? actionMenu : mobileButtons"
                                        [ngTemplateOutletContext]="{element: element}">
                                    </ng-container>
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="favorite">
                                <th mat-header-cell *matHeaderCellDef></th>
                                <td mat-cell *matCellDef="let element"
                                    [attr.data-automation-id]="'project-favorite-' + element.id"
                                    class="ama-dashboard-list-container-favorite-cell">
                                    <modelingsdk-prefer-project-button [projectId]="element.id" [isPreferred]="element.favorite">
                                    </modelingsdk-prefer-project-button>
                                </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                        </table>
                    </div>

                    <div *ngIf="(dataSource$ | async).data.length" class="ama-paginator-block">
                        <mat-paginator *ngIf="pagination$ | async; let pagination"
                            (page)="onPageChange($event, pagination)"
                            [pageIndex]="pagination.skipCount / pagination.maxItems" [length]="pagination.totalItems"
                            [pageSize]="pagination.maxItems" [pageSizeOptions]="pageSizeOptions">
                        </mat-paginator>
                    </div>

                </div>
            </ng-container>

            <ng-template #noDataTemplate>
                <adf-empty-content icon="apps" class="ama-dashboard-emptylist" title="DASHBOARD.TABLE.NO_ITEMS">
                </adf-empty-content>
            </ng-template>
        </ng-container>
    </ng-container>


    <ng-template #loadingTemplate>
        <div class="ama-dashboard-list">
            <mat-spinner class="ama-dashboard-spinner"></mat-spinner>
        </div>
    </ng-template>

    <ng-template #mobileButtons let-element="element">
        <div class="ama-project-list-icon-button-menu">
            <button mat-icon-button (click)="editRow(element)" [attr.data-automation-id]="'project-edit-' + element.id"
                aria-label="Create icon button">
                <mat-icon>create</mat-icon>
            </button>
            <button mat-icon-button (click)="deleteRow(element)"
                [attr.data-automation-id]="'project-delete-' + element.id" aria-label="Delete icon button">
                <mat-icon>delete</mat-icon>
            </button>
            <button mat-icon-button (click)="downloadProject(element)"
                [attr.data-automation-id]="'project-download-' + element.id" aria-label="Download icon button">
                <mat-icon>file_download</mat-icon>
            </button>
            <button mat-icon-button (click)="saveAsProject(element)"
                [attr.data-automation-id]="'project-save-as-' + element.id" aria-label="Save as icon button">
                <mat-icon svgIcon="save_as"></mat-icon>
            </button>
            <button *ngFor="let button of buttons" mat-icon-button
                [attr.data-automation-id]="'project-' + button.automationId + '-' + element.id"
                (click)="handleClick(button.actionClass, element.id)">
                <mat-icon>{{ button.icon }}</mat-icon>
            </button>
        </div>
    </ng-template>

    <ng-template #actionMenu let-element="element">
        <button mat-icon-button [matMenuTriggerFor]="menu" [attr.data-automation-id]="'project-context-' + element.id"
            [title]="'APP.MORE_ACTIONS' | translate">
            <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="editRow(element)" [attr.data-automation-id]="'project-edit-' + element.id">
                <mat-icon>create</mat-icon> <span>{{ 'APP.MENU.EDIT' | translate }}</span>
            </button>
            <button mat-menu-item (click)="deleteRow(element)" *ngIf="isProjectCreator(element.createdBy)"
                [attr.data-automation-id]="'project-delete-' + element.id">
                <mat-icon>delete</mat-icon> <span>{{ 'APP.MENU.DELETE' | translate }}</span>
            </button>
            <button mat-menu-item (click)="downloadProject(element)"
                [attr.data-automation-id]="'project-download-' + element.id">
                <mat-icon>file_download</mat-icon> <span>{{ 'APP.MENU.DOWNLOAD' | translate }}</span>
            </button>
            <button mat-menu-item (click)="saveAsProject(element)"
                [attr.data-automation-id]="'project-save-as-' + element.id">
                <mat-icon svgIcon="save_as"></mat-icon> <span>{{ 'APP.MENU.SAVE_AS' | translate }}</span>
            </button>
            <button mat-menu-item (click)="addCollaborators(element)"
                [attr.data-automation-id]="'project-collaborators-' + element.id">
                <mat-icon>supervised_user_circle</mat-icon> <span>{{ 'APP.MENU.COLLABORATORS' | translate }}</span>
            </button>
            <button *ngFor="let button of buttons" mat-menu-item
                [attr.data-automation-id]="'project-' + button.automationId + '-' + element.id"
                (click)="handleClick(button.actionClass, element.id)">
                <mat-icon>{{ button.icon }}</mat-icon> <span>{{ button.title | translate }}</span>
            </button>
        </mat-menu>
    </ng-template>

</div>
